<template>
	<view class="content">
		<nav-bars bgColor="transparent" :title="current==0?'促销商品':'促销商品'" fontColor="#000"></nav-bars>
		<view class="wrapper">
			<view class="s_cTabs">
			<view class="s_ctItem" v-for="(item,index) in tabList" :class="{active:current==index}":data-current="index" @tap="tabChange">{{item.name}}<text></text></view>
			</view>
			<!-- 产品包 -->
			<!-- <productPack v-bind:stewardId="steward_id" v-if="current==0 && steward_id>0"></productPack> -->
			<!-- 促销商品 -->
			<promoteGoods v-bind:stewardId="steward_id" :goodsList="goodsList" v-if="current==0 && steward_id>0"></promoteGoods>
			<u-loadmore v-if="goodsList.length>0" :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import service_product from '@/service/product.js'
	import productPack from '../../../components/productPack.vue'
	import promoteGoods from '../../../components/promoteGoods.vue'
	export default {
		components: {
			productPack,
			promoteGoods
		},
		data() {
			return {
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了~'
				},
				baseImg: this.$static,
				page: 1,
				pagesize: 10,
				goodsList: [],
				current: 0,
				tabList: [
					// {
					// 	name: '产品包'
					// },
					{
						name: '活动商品'
					}
				],
				steward_id: 0
			}
		},
		onLoad(options) {
			this.steward_id = options.steward_id
			this.getProduct(options.steward_id);
		},
		methods: {
			getProduct(steward_id) {
				let params = {
					page: this.page,
					pagesize: this.pagesize,
					steward_id:steward_id,
				}
				this.statusLoading = 'loading'
				service_product.stewardProduct(params).then(res => {
					if (res.code == 1) {
						let data = res.data.products;
						let pages=this.page*this.pagesize
						if (pages>=res.data.total) {
							this.statusLoading = 'nomore'
						} else {
							this.statusLoading = 'loading'
						}
						this.goodsList = this.goodsList.concat(data)
					}
				})
			},
			goSkip(url) {
				uni.navigateTo({
					url: url
				});
			},
			tabChange(e) {
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
				console.log('===', index)
				if (index == 0) {
					this.getProduct();
				}
			}
		},
		onReachBottom() {
			this.page++;
			if (this.statusLoading == 'loading') {
				this.getProduct(this.steward_id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.wrapper {
			width: 100%;
             padding-bottom:34rpx;
			.s_cTabs {
				width: 45%;
				padding-left: 4%;
				position: relative;
				display: flex;
				z-index: 100;

				.s_ctItem {
					flex: 1;
					position: relative;
					font-size: 30rpx;
					color: #333;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 100rpx;

					&.active {
						font-weight: bold;
						position: relative;

						text {
							width: 50rpx;
							height: 5rpx;
							border-radius: 4rpx 4rpx;
							background: #F99704;
							position: absolute;
							bottom: 0;
							margin-left: 25rpx;
							z-index: 1;
							;
						}
					}
				}
			}

			.goodsBox {
				width: 96%;
				margin: 60rpx auto;
				position: relative;

				.goodsItem {
					width: 100%;
					height: auto;
					margin-bottom: 60rpx;

					.goods-cover {
						width: 28%;

						image {
							width: 190rpx;
							height: 190rpx;
							border-radius: 10rpx;
						}
					}

					.goods-dateils {
						width: 72%;
						margin-left: 20rpx;

						.columnTop {
							width: 100%;
							justify-content: space-between;
							position: relative;

							.title {
								width: 450rpx;
								height: 60rpx;
							}

							.shareIcon {
								width: 80rpx;
								height: 80rpx;

								image {
									width: 100%;
									height: 100%;
									margin-top: -8px;
								}
							}
						}

						.tag {
							width: 200rpx;
							margin: 28rpx 0 0 0;
							height: auto;
							padding-bottom: 10rpx;
						}

						.bottomBox {
							align-items: center;
							justify-content: space-between;

							.pricr {
								width: 350rpx;
								height: auto;
								color: #DDA955;
							}

							.sidebarRight {
								color: #A6A6A6;
								padding-right: 20rpx;
							}
						}

					}
				}
			}
		}

		// 没有数据
		.notList {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 426rpx;

			image {
				width: 426rpx;
				height: 356rpx;
				margin-bottom: 40rpx;
			}

			font:500 40rpx/56rpx PingFang SC;
			color: #333;
		}

		.text-ellipsis {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.flex {
			display: flex;
		}
	}
</style>
